<!DOCTYPE html>
<html>
<head>
<style>
  meter.tall { width: 30px; height: 40px; }
  ul, h2, p { margin: 0.2em; }
  h1, h2 { font-size: medium; }
  li { margin: 0.2em; list-style-type: none; }
  meter.barstyled::-webkit-meter-bar { background: gray; border-style: solid; border-width: 2px; border-color: #222; }
  meter.valstyled::-webkit-meter-optimum-value { background: green; border-style: solid; border-width: 2px; border-color: #7c7; }
  meter#bar-paddings::-webkit-meter-bar { padding: 5px; }
</style>
</head>
<body>
  <h2>Horizontal meters with the non-themed default style</h2>
  <ul>
    <li><meter min="0" max="100" low="30" high="60" optimum="100" value="25" ></meter>
        <meter min="0" max="100" low="30" high="60" optimum="100" value="45" ></meter>
        <meter min="0" max="100" low="30" high="60" optimum="100" value="75" ></meter></li>
    <li><meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="25" ></meter>
        <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="45" ></meter>
        <meter class="tall" min="0" max="100" low="30" high="60" optimum="100" value="75" ></meter></li>
  </ul>
  <h2>Providing meter styles</h2>
  <div style="background-color: #eee">
    <ul>
      <li><meter style="border-color: #224; border-style: solid; border-width: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has border</li>
      <li><meter style="border-color: #224; padding: 5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has padding</li>
      <li><meter style="border-color: #224; margin:  5px 20px 5px 10px;" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has margin</li>
      <li><meter style="box-shadow: 4px 4px 10px rgba(255,0,0,0.5), inset 4px 4px 4px rgba(0,255,0,0.5);"></meter> has box-shadow</li>
      <li><meter style="background: blue; color: white;" value="50">50</meter> Background CSS property does not disable -webkit-appearance.</li>
    </ul>
  </div>
  <h2>Providing bar and/or value styles</h2>
  <div style="background-color: #eee">
  <ul>
    default -webkit-appearance, thus should use Shadow DOM CSS rendring.
    <li><meter class="valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has bar style but should ignore it.</li>
    <li><meter class="barstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has value style but should ignore it.</li>
    <li><meter class="barstyled valstyled" min="0" max="100" low="30" high="60" optimum="100" value="80" ></meter> has both styles but should ignore them.</li>
  </ul>

  </div>
  <h2>Providing appearances</h2>
  <div style="background-color: #eee">
  <ul>
    <li><meter style="-webkit-appearance: none" min="0" max="100" low="30" high="60" optimum="100" value="80" >80</meter> has "none" appearance, should render METER content.</li> 
    <li><meter id="appearanceNoneLater" min="0" max="100" low="30" high="60" optimum="100" value="80" >80%</meter> gets "none" appearance after the initial rendering with "meter" appearance.</li>
  </ul>
  </div>
  <h2>Providing bar paddings</h2>
  <div style="background-color: #eee">
    <meter id="bar-paddings" min="0" max="100" low="30" high="60" optimum="50" value="50" ></meter> has "padding" on the bar.
  </ul>
  </div>
<script>
var noneLater = document.getElementById('appearanceNoneLater');
noneLater.offsetLeft; // Force layout.
noneLater.setAttribute('style', '-webkit-appearance:none');
noneLater.offsetLeft; // Force layout.
</script>
</body>
</html>
